import { useState, useEffect } from 'react';
import {
    DualAxes,
    DualAxesConfig,
} from '@ant-design/charts';
import * as apiType from './data';
import * as api from './api';

export default function () {
    const [data, setData] = useState<apiType.IChartData[]>([]);

    useEffect(() => {
        api.getData1().then((res) => {
            setData(res);
        });
    }, []);

    const chartProps: DualAxesConfig = {
        data: [data, data],
        height: 400,
        xField: 'year',
        yField: ['t1', 't2'],
        yAxis: {
            t1: {
                max: Math.max( ...data.map(d => d.t1).concat( data.map(d => d.t2) ) ),
                min: 0,
            },
            t2: false,
        },
    };
    
    return <DualAxes { ...chartProps } />;
}
